div.node {
    position: absolute;
    z-index: 10;
}

div.oval0 {
    background-image: url(http://www.madin.jp/gadget/baloon/black/oval0.gif);
    width: 124px;
    height: 81px;
}

div.oval1 {
    background-image: url(http://www.madin.jp/gadget/baloon/black/oval1.gif);
    width: 114px;
    height: 73px;
}

div.oval2 {
    background-image: url(http://www.madin.jp/gadget/baloon/black/oval2.gif);
    width: 106px;
    height: 61px;
}

div.cloud0 {
    background-image: url(http://www.madin.jp/gadget/baloon/black/cloud0.gif);
    width: 135px;
    height: 81px;
}

div.cloud1 {
    background-image: url(http://www.madin.jp/gadget/baloon/black/cloud1.gif);
    width: 124px;
    height: 75px;
}

div.cloud2 {
    background-image: url(http://www.madin.jp/gadget/baloon/black/cloud2.gif);
    width: 116px;
    height: 64px;
}

div.lightning0 {
    background-image: url(http://www.madin.jp/gadget/baloon/black/lightning0.gif);
    width: 148px;
    height: 86px;
}

div.lightning1 {
    background-image: url(http://www.madin.jp/gadget/baloon/black/lightning1.gif);
    width: 137px;
    height: 80px;
}

div.lightning2 {
    background-image: url(http://www.madin.jp/gadget/baloon/black/lightning2.gif);
    width: 127px;
    height: 62px;
}

div.black_oval0 {
    background-image: url(http://www.madin.jp/gadget/baloon/black/oval0.gif);
    width: 124px;
    height: 81px;
}

div.black_oval1 {
    background-image: url(http://www.madin.jp/gadget/baloon/black/oval1.gif);
    width: 114px;
    height: 73px;
}

div.black_oval2 {
    background-image: url(http://www.madin.jp/gadget/baloon/black/oval2.gif);
    width: 106px;
    height: 61px;
}

div.black_cloud0 {
    background-image: url(http://www.madin.jp/gadget/baloon/black/cloud0.gif);
    width: 135px;
    height: 81px;
}

div.black_cloud1 {
    background-image: url(http://www.madin.jp/gadget/baloon/black/cloud1.gif);
    width: 124px;
    height: 75px;
}

div.black_cloud2 {
    background-image: url(http://www.madin.jp/gadget/baloon/black/cloud2.gif);
    width: 116px;
    height: 64px;
}

div.black_lightning0 {
    background-image: url(http://www.madin.jp/gadget/baloon/black/lightning0.gif);
    width: 148px;
    height: 86px;
}

div.black_lightning1 {
    background-image: url(http://www.madin.jp/gadget/baloon/black/lightning1.gif);
    width: 137px;
    height: 80px;
}

div.black_lightning2 {
    background-image: url(http://www.madin.jp/gadget/baloon/black/lightning2.gif);
    width: 127px;
    height: 62px;
}

div.red_oval0 {
    background-image: url(http://www.madin.jp/gadget/baloon/red/oval0.gif);
    width: 124px;
    height: 81px;
}

div.red_oval1 {
    background-image: url(http://www.madin.jp/gadget/baloon/red/oval1.gif);
    width: 114px;
    height: 73px;
}

div.red_oval2 {
    background-image: url(http://www.madin.jp/gadget/baloon/red/oval2.gif);
    width: 106px;
    height: 61px;
}

div.red_cloud0 {
    background-image: url(http://www.madin.jp/gadget/baloon/red/cloud0.gif);
    width: 135px;
    height: 81px;
}

div.red_cloud1 {
    background-image: url(http://www.madin.jp/gadget/baloon/red/cloud1.gif);
    width: 124px;
    height: 75px;
}

div.red_cloud2 {
    background-image: url(http://www.madin.jp/gadget/baloon/red/cloud2.gif);
    width: 116px;
    height: 64px;
}

div.red_lightning0 {
    background-image: url(http://www.madin.jp/gadget/baloon/red/lightning0.gif);
    width: 148px;
    height: 86px;
}

div.red_lightning1 {
    background-image: url(http://www.madin.jp/gadget/baloon/red/lightning1.gif);
    width: 137px;
    height: 80px;
}

div.red_lightning2 {
    background-image: url(http://www.madin.jp/gadget/baloon/red/lightning2.gif);
    width: 127px;
    height: 62px;
}

div.purple_oval0 {
    background-image: url(http://www.madin.jp/gadget/baloon/purple/oval0.gif);
    width: 124px;
    height: 81px;
}

div.purple_oval1 {
    background-image: url(http://www.madin.jp/gadget/baloon/purple/oval1.gif);
    width: 114px;
    height: 73px;
}

div.purple_oval2 {
    background-image: url(http://www.madin.jp/gadget/baloon/purple/oval2.gif);
    width: 106px;
    height: 61px;
}

div.purple_cloud0 {
    background-image: url(http://www.madin.jp/gadget/baloon/purple/cloud0.gif);
    width: 135px;
    height: 81px;
}

div.purple_cloud1 {
    background-image: url(http://www.madin.jp/gadget/baloon/purple/cloud1.gif);
    width: 124px;
    height: 75px;
}

div.purple_cloud2 {
    background-image: url(http://www.madin.jp/gadget/baloon/purple/cloud2.gif);
    width: 116px;
    height: 64px;
}

div.purple_lightning0 {
    background-image: url(http://www.madin.jp/gadget/baloon/purple/lightning0.gif);
    width: 148px;
    height: 86px;
}

div.purple_lightning1 {
    background-image: url(http://www.madin.jp/gadget/baloon/purple/lightning1.gif);
    width: 137px;
    height: 80px;
}

div.purple_lightning2 {
    background-image: url(http://www.madin.jp/gadget/baloon/purple/lightning2.gif);
    width: 127px;
    height: 62px;
}

div.blue_oval0 {
    background-image: url(http://www.madin.jp/gadget/baloon/blue/oval0.gif);
    width: 124px;
    height: 81px;
}

div.blue_oval1 {
    background-image: url(http://www.madin.jp/gadget/baloon/blue/oval1.gif);
    width: 114px;
    height: 73px;
}

div.blue_oval2 {
    background-image: url(http://www.madin.jp/gadget/baloon/blue/oval2.gif);
    width: 106px;
    height: 61px;
}

div.blue_cloud0 {
    background-image: url(http://www.madin.jp/gadget/baloon/blue/cloud0.gif);
    width: 135px;
    height: 81px;
}

div.blue_cloud1 {
    background-image: url(http://www.madin.jp/gadget/baloon/blue/cloud1.gif);
    width: 124px;
    height: 75px;
}

div.blue_cloud2 {
    background-image: url(http://www.madin.jp/gadget/baloon/blue/cloud2.gif);
    width: 116px;
    height: 64px;
}

div.blue_lightning0 {
    background-image: url(http://www.madin.jp/gadget/baloon/blue/lightning0.gif);
    width: 148px;
    height: 86px;
}

div.blue_lightning1 {
    background-image: url(http://www.madin.jp/gadget/baloon/blue/lightning1.gif);
    width: 137px;
    height: 80px;
}

div.blue_lightning2 {
    background-image: url(http://www.madin.jp/gadget/baloon/blue/lightning2.gif);
    width: 127px;
    height: 62px;
}

div.cyan_oval0 {
    background-image: url(http://www.madin.jp/gadget/baloon/cyan/oval0.gif);
    width: 124px;
    height: 81px;
}

div.cyan_oval1 {
    background-image: url(http://www.madin.jp/gadget/baloon/cyan/oval1.gif);
    width: 114px;
    height: 73px;
}

div.cyan_oval2 {
    background-image: url(http://www.madin.jp/gadget/baloon/cyan/oval2.gif);
    width: 106px;
    height: 61px;
}

div.cyan_cloud0 {
    background-image: url(http://www.madin.jp/gadget/baloon/cyan/cloud0.gif);
    width: 135px;
    height: 81px;
}

div.cyan_cloud1 {
    background-image: url(http://www.madin.jp/gadget/baloon/cyan/cloud1.gif);
    width: 124px;
    height: 75px;
}

div.cyan_cloud2 {
    background-image: url(http://www.madin.jp/gadget/baloon/cyan/cloud2.gif);
    width: 116px;
    height: 64px;
}

div.cyan_lightning0 {
    background-image: url(http://www.madin.jp/gadget/baloon/cyan/lightning0.gif);
    width: 148px;
    height: 86px;
}

div.cyan_lightning1 {
    background-image: url(http://www.madin.jp/gadget/baloon/cyan/lightning1.gif);
    width: 137px;
    height: 80px;
}

div.cyan_lightning2 {
    background-image: url(http://www.madin.jp/gadget/baloon/cyan/lightning2.gif);
    width: 127px;
    height: 62px;
}

div.green_oval0 {
    background-image: url(http://www.madin.jp/gadget/baloon/green/oval0.gif);
    width: 124px;
    height: 81px;
}

div.green_oval1 {
    background-image: url(http://www.madin.jp/gadget/baloon/green/oval1.gif);
    width: 114px;
    height: 73px;
}

div.green_oval2 {
    background-image: url(http://www.madin.jp/gadget/baloon/green/oval2.gif);
    width: 106px;
    height: 61px;
}

div.green_cloud0 {
    background-image: url(http://www.madin.jp/gadget/baloon/green/cloud0.gif);
    width: 135px;
    height: 81px;
}

div.green_cloud1 {
    background-image: url(http://www.madin.jp/gadget/baloon/green/cloud1.gif);
    width: 124px;
    height: 75px;
}

div.green_cloud2 {
    background-image: url(http://www.madin.jp/gadget/baloon/green/cloud2.gif);
    width: 116px;
    height: 64px;
}

div.green_lightning0 {
    background-image: url(http://www.madin.jp/gadget/baloon/green/lightning0.gif);
    width: 148px;
    height: 86px;
}

div.green_lightning1 {
    background-image: url(http://www.madin.jp/gadget/baloon/green/lightning1.gif);
    width: 137px;
    height: 80px;
}

div.green_lightning2 {
    background-image: url(http://www.madin.jp/gadget/baloon/green/lightning2.gif);
    width: 127px;
    height: 62px;
}

div.yellow_oval0 {
    background-image: url(http://www.madin.jp/gadget/baloon/yellow/oval0.gif);
    width: 124px;
    height: 81px;
}

div.yellow_oval1 {
    background-image: url(http://www.madin.jp/gadget/baloon/yellow/oval1.gif);
    width: 114px;
    height: 73px;
}

div.yellow_oval2 {
    background-image: url(http://www.madin.jp/gadget/baloon/yellow/oval2.gif);
    width: 106px;
    height: 61px;
}

div.yellow_cloud0 {
    background-image: url(http://www.madin.jp/gadget/baloon/yellow/cloud0.gif);
    width: 135px;
    height: 81px;
}

div.yellow_cloud1 {
    background-image: url(http://www.madin.jp/gadget/baloon/yellow/cloud1.gif);
    width: 124px;
    height: 75px;
}

div.yellow_cloud2 {
    background-image: url(http://www.madin.jp/gadget/baloon/yellow/cloud2.gif);
    width: 116px;
    height: 64px;
}

div.yellow_lightning0 {
    background-image: url(http://www.madin.jp/gadget/baloon/yellow/lightning0.gif);
    width: 148px;
    height: 86px;
}

div.yellow_lightning1 {
    background-image: url(http://www.madin.jp/gadget/baloon/yellow/lightning1.gif);
    width: 137px;
    height: 80px;
}

div.yellow_lightning2 {
    background-image: url(http://www.madin.jp/gadget/baloon/yellow/lightning2.gif);
    width: 127px;
    height: 62px;
}

div.level0 {
    border: solid 5px black;
    background-color: #aaf;
}

div.level1 {
    border: solid 3px #444;
    background-color: #ccf;
}

div.level2 {
    border: solid 2px #444;
    background-color: #eef;
}

div.level3 {
    border: solid 1px #444;
}

#canvas {
    width: 100%;
    height: 600px;
    overflow: hidden;
    border: solid 1px #ddd;
    position: absolute;
    left: 0px;
    top: 0px;
}

#canvasContainer {
    width: 100%;
    height: 400px;
    overflow: scroll;
    border: solid 1px #ddd;
}

div.line {
    overflow: hidden;
    position: absolute;
    z-index: 1;
    border: none;
    background-color: black;
}

div.label {
    text-align: center;
    cursor: text;
}

div.pickerPalette {
    position: absolute;
    z-index: 100;
    border: solid 1px #aaa;
    background-color: #ddd;
}

div.pickerPalette div {
    margin: 1px;
    width: 100px;
    text-align: left;
    font-size: 70%;
    display:block;
    background-color: white;
    cursor: pointer;
    cursor: hand;
}

div.iconContainer {
    display: inline;
    width: 16px;
    height: 16px;
}

img.actorIcon {
    position: absolute;
    width: 24px;
    height: 24px;
    z-index: 10;
}

div.menuPalette {
    background-color: #ddd;
    text-align: right;
    border-bottom: solid 1px #aaa;
    cursor: move;
}

div.menuPalette img {
    cursor: pointer;
    cursor: hand;
}

body {
    margin: 0px;
    padding: 0px;
}

#drawing {
    background-color: white;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
}
